<template>
	<view>
		<view class="orderList" v-if="1==order_data.serv_enum">
			<view class="headConTwo">
				<view class="addressCon">
					<view class="linesolid"></view>
					<view class="addressname">
						<view class="drop"></view>
						<view class="detail" @click="line_to(order_data.departure_lat,order_data.departure_lng,order_data.departure)">{{order_data.departure}}</view>
					</view>
					<view class="addressname mtop">
						<view class="drop"></view>
						<view class="detail" @click="line_to(order_data.destination_lat,order_data.destination_lng,order_data.destination)">{{order_data.destination}}</view>
					</view>
				</view>
				<view class="state right">{{order_data.status_text}}</view>
			</view>
			<view class="cao">
				<view class="time top">{{order_data.createtime}}</view>
			</view>
		</view>
		<view class="box" v-else>
			<view class="head">
				<view class="name">{{order_data.serv_name}}服务</view>
				<view class="state">{{order_data.status_text}}</view>
			</view>
			<view class="address">{{order_data.destination}}</view>
			<view class="time">{{order_data.createtime}}</view>
			<view class="navigation" @click="line_to(order_data.destination_lat,order_data.destination_lng,order_data.destination)">
				<image src="../../../static/images/cc/dh.png" mode="widthFix"></image>
				<view>导航</view>
			</view>
		</view>
		<view class="more">
			<view class="list">
				<view class="title">订单编号</view>
				<view class="content">{{order_data.serv_order_no}}</view>
			</view>
			<view class="list">
				<view class="title">服务项目</view>
				<view class="content">{{order_data.serv_name}}服务</view>
			</view>
			<view class="list" v-show="2==order_data.serv_enum">
				<view class="title">服务地点</view>
				<view class="content">{{order_data.destination}}</view>
			</view>
			<view class="list" v-show="1==order_data.serv_enum">
				<view class="title">上车地点</view>
				<view class="content">{{order_data.departure}}</view>
			</view>
			<view class="list" v-show="1==order_data.serv_enum">
				<view class="title">下车地点</view>
				<view class="content">{{order_data.destination}}</view>
			</view>
			<view class="list">
				<view class="title">雇主姓名</view>
				<view class="content">{{order_data.contact_name}}</view>
			</view>
			<view class="list">
				<view class="title">雇主电话</view>
				<view class="content">{{order_data.contact_phone}}</view>
			</view>
			<view class="list">
				<view class="title">发布时间</view>
				<view class="content">{{order_data.stat_1_time}}</view>
			</view>
			<view class="list">
				<view class="title">接单时间</view>
				<view class="content">{{order_data.stat_2_time}}</view>
			</view>
			<view class="list">
				<view class="title">完成时间</view>
				<view class="content">{{order_data.stat_4_time}}</view>
			</view>
		</view>

		<view class="foot" v-show="2==order_data.status">
			<view class="operate" @click="do_set_code()">开始订单</view>
			<!-- 			<view class="twocon">
				<view class="tclose">取消订单</view>
				<view class="tcall">联系雇主</view>
			</view> -->
		</view>
		<view class="blackBox" v-if="set_code">
			<view class="whiteBox">
				<view class="alertTitle">请输入核销码(由雇主提供)</view>
				<view class="alertCon">
					<input type="text" placeholder="输入核销码" placeholder-class="mo" v-model="check_code"/>
				</view>
				<view class="alertTwo">
					<view class="close" @click="do_set_code()">取消</view>
					<view class="ok" @click="begin_order()">确认</view>
				</view>
			</view>
			<view class="closeimg">
				<image src="../../../static/images/cc/close2.png" mode="widthFix" @click="do_set_code(0)"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				state: false,
				order_id:0,
				order_data:{},
				is_loaded:false,
				check_code:'',
				set_code:false,
			}
		},
		onLoad(option){
			console.log(option)
			this.order_id = option.order_id;
			this.load_data(0,0);
		},
		methods: {
			do_set_code() {
				this.check_code='';
				this.set_code = !this.set_code
			},
			async begin_order(){
				var that = this;
				await uni.request({
					url: '/dispatch/server/beginOrder',
					data: {
						order_id:that.order_id,
						check_code:that.check_code,
					},
					method:"POST",
					success: res => {
						this.do_set_code();
						console.log("更新列表")
						setTimeout(()=>{
							that.load_data(0,0);
						},500);
					},
					complete:()=>{
						// uni.hideLoading();
						// that.loading = false;
					}
				});	
			},
			async load_data(lat,lng){
				// 获取列表
				await uni.request({
					url: '/dispatch/server/getOrderDetail',
					data: {
						order_id:this.order_id,
						lat:lat,
						lng:lng,
					},
					method:"POST",
					success: res => {
						this.order_data = res.data;
						this.is_loaded = true;
						// this.list = this.list.concat(res.data);
						console.log(res);
					},
					complete:()=>{
					}
				});	
			},
			complaint() {
				uni.navigateTo({
					url: '/pages/dispatch/complaint/complaint'
				})
			},
			line_to(lat,lng,address){
				uni.openLocation({
				latitude: lat,
				longitude: lng,
				address: address,
				scale: 18,
				success: () => {
				console.log('导航成功');
				}
				});
			},
			show() {
				this.state = !this.state
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F7F7;
	}

	.blackBox {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.7);
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		align-content: center;

		.whiteBox {
			width: 540rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;

			.alertTitle {
				width: 100%;
				text-align: center;
				font-size: 30rpx;
				color: #3D3D3D;
				padding: 40rpx 0;
			}

			.alertCon {
				width: 470rpx;
				height: 70rpx;
				border-radius: 10rpx;
				background-color: #F6F6F6;

				input {
					width: 422rpx;
					margin-left: 24rpx;
					height: 70rpx;
					font-size: 26rpx;
				}

				.mo {
					color: #999999;
				}
			}

			.alertTwo {
				width: 100%;
				display: flex;
				border-top: 1px solid #D8D8D8;
				margin-top: 42rpx;

				.close {
					width: 50%;
					height: 96rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					box-sizing: border-box;
					border-right: 1px solid #D8D8D8;
				}

				.ok {
					width: 50%;
					height: 96rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					box-sizing: border-box;
					color: #CA281C;
				}
			}
		}

		.closeimg {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin-top: 55rpx;

			image {
				width: 74rpx;
				height: 74rpx;
			}
		}
	}

	.box {
		width: 682rpx;
		margin-left: 34rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin-top: 30rpx;
		padding: 40rpx 0;
		position: relative;
	}

	.head {
		display: flex;
		justify-content: space-between;
	}

	.name {
		font-size: 36rpx;
		margin-left: 30rpx;
		color: #3D3D3D;
	}

	.state {
		font-size: 26rpx;
		color: #84BD00;
		margin-right: 30rpx;
	}

	.address {
		width: 622rpx;
		margin-top: 26rpx;
		font-size: 30rpx;
		color: #999999;
		margin-left: 30rpx;
	}

	.time {
		margin-left: 30rpx;
		margin-top: 26rpx;
		font-size: 26rpx;
		color: #999999;
	}

	.more {
		width: 682rpx;
		margin-left: 34rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin-top: 30rpx;
		padding: 20rpx 0;
	}

	.list {
		width: 622rpx;
		margin-left: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 70rpx;
	}

	.title {
		font-size: 30rpx;
		color: #999999;
		width: 260rpx;
	}

	.content {
		font-size: 30rpx;
		color: #333333;
	}

	.code {
		width: 682rpx;
		margin-left: 34rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin-top: 30rpx;
		padding: 40rpx 0;
	}

	.codetitle {
		font-size: 32rpx;
		color: #333333;
		margin-left: 40rpx;
	}

	.number {
		width: 100%;
		text-align: center;
		font-size: 55rpx;
		margin-top: 20rpx;
	}

	.foot {
		width: 100%;
		position: fixed;
		bottom: 70rpx;
		padding-bottom: env(safe-area-inset-bottom);
		display: flex;
		justify-content: center;
	}

	.operate {
		width: 678rpx;
		background-color: #84BD00;
		color: #ffffff;
		font-size: 32rpx;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 82rpx;
	}

	.orderList {
		width: 690rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
		padding-top: 46rpx;
		padding-bottom: 36rpx;
	}

	.headCon {
		width: 630rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: 30rpx;
	}

	.headConTwo {
		width: 630rpx;
		display: flex;
		justify-content: space-between;
		margin-left: 30rpx;
		padding-bottom: 20rpx;
	}

	.headName {
		font-size: 36rpx;
		color: #3D3D3D;
	}

	.state {
		font-size: 26rpx;
		color: #84BD00;
	}







	.drop {
		width: 14rpx;
		height: 14rpx;
		// background-color: #D8D8D8;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.addressCon {
		width: 500rpx;
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.linesolid {
		position: absolute;
		left: 7rpx;
		border-left: 1px dashed #D8D8D8;
		height: 60%;
	}
	.linesolid:before{
		border-radius: 50%;
		content: '';
		  position: absolute;
		  left: -8rpx;
		  width: 14rpx;
		  height: 14rpx;
		  background-color: #D8D8D8;
	}
	.linesolid::after{
		border-radius: 50%;
		content: '';
		position: absolute;
		left: -8rpx;
		bottom: 0rpx;
		width: 14rpx;
		height: 14rpx;
		background-color: #D8D8D8;
	}

	.addressname {
		font-size: 30rpx;
		color: #333333;
		display: flex;
		align-items: center;
	}

	.detail {
		width: 466rpx;
	}

	.mtop {
		margin-top: 20rpx;
	}

	.right {
		margin-right: 0;
	}

	.top {
		margin-top: 0;
	}

	.cao {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.ts {
		width: 162rpx;
		height: 54rpx;
		border-radius: 50rpx;
		border: 1px solid #DBDBDB;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		color: #333333;
		margin-right: 30rpx;
	}

	.twocon {
		width: 678rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.tclose {
		width: 320rpx;
		height: 82rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50rpx;
		border: 1px solid #84BD00;
		font-size: 33rpx;
		color: #84BD00;
		box-sizing: border-box;
	}

	.tcall {
		width: 320rpx;
		height: 82rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50rpx;
		border: 1px solid #84BD00;
		font-size: 33rpx;
		color: #ffffff;
		box-sizing: border-box;
		background-color: #84BD00;
	}

	.navigation {
		width: 60rpx;
		position: absolute;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		top: 110rpx;
		right: 36rpx;

		image {
			width: 52rpx;
			height: 52rpx;
		}

		view {
			font-size: 26rpx;
			color: #999999;
			margin-top: 8rpx;
		}
	}
</style>